<template>
    <div class="site-sidebar" id="autoScroll">
        <el-menu 
        class="el-menu-vertical-demo" 
        @open="handleOpen" 
        @close="handleClose"
        background-color="#324157"
        active-text-color="#fff">
            <div
            v-for="menu in menuList"
            :key="menu.id">
                <el-menu-item :index="menu.id" @click="gotoRouteHandle(menu)">
                    <!-- <i class="el-icon-menu"></i> -->
                    <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
                    <span slot="title">{{menu.name}}</span>
                </el-menu-item>
            </div>
            
        </el-menu>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        menuList:[]
      }
    },
    created () {
        let menu = JSON.parse(sessionStorage.getItem('menuList') || '[]')
        this.menuList = menu[2].children
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
      gotoRouteHandle (menu) {
          this.$router.push({ name: menu.name })
      }
    }
  }
</script>
<style  scoped lang="less">
    #autoScroll::-webkit-scrollbar-track
    {
        border-radius: 0px;
        background-color: #F5F5F5;
    }

    #autoScroll::-webkit-scrollbar
    {
        width: 0px;
        background-color: #F5F5F5;
    }

    #autoScroll::-webkit-scrollbar-thumb
    {
        border-radius: 0px;
        background-color: #bfbfbf;
    }
    .site-sidebar{
        width: 220px;
        height: 100%;
        margin-top: 50px;
        z-index: 1;
        overflow-y: scroll;
        position: fixed;
        background: #324157;
    }
    li{
        text-align: left;
    }
    .el-menu-item span{
      display: inline-block;
      margin-left: 10px;
    }
    .el-menu-item{
      color: #8a979e;
    }
    .el-menu{
        border-right: 0;
    }
    .site-sidebar__menu-icon{
        width: 1em;
        height: 1em
    }
</style>